import React from 'react';
import {
  ProForm,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import { Button, Flex, Form } from 'antd';
import usePictureTagCategory from '@/hooks/usePictureTagCategory';

interface Props {
  onSearch?: (searchParams: API.PictureQueryRequest) => void;
}

// 搜索表单组件
const PictureSearchForm: React.FC<Props> = (props) => {
  const [form] = Form.useForm();
  const { tagList, categoryList } = usePictureTagCategory();
  const { onSearch } = props;
  const doSearch = () => {
    const values = form.getFieldsValue();
    onSearch?.({ ...values });
  };
  return (
    <ProForm<API.PictureQueryRequest> layout={'inline'} submitter={false} form={form}>
      <Flex wrap justify={'flex-start'} gap={'small'}>
        <ProFormText name="searchText" label="关键词" placeholder="请输入关键词" />
        <ProFormSelect
          name="tags"
          label="标签"
          options={tagList?.map((item) => {
            return {
              label: item,
              value: item,
            };
          })}
          placeholder="请选择标签"
          mode={'tags'}
        />
        <ProFormSelect
          name="category"
          label="分类"
          options={categoryList?.map((item) => {
            return {
              label: item,
              value: item,
            };
          })}
          placeholder="请选择分类"
        />
        {/*<ProFormDatePicker name="editTime" label="编辑时间" placeholder="请选择编辑时间" />*/}
        <ProFormDateRangePicker
          name="editTimeRange"
          label="编辑时间"
          placeholder={['请选择开始时间', '请选择结束时间']}
        />
        <ProFormText name="picName" label="图片名称" placeholder="请输入图片名称" />
        <ProFormText name="picDescription" label="图片简介" placeholder="请输入图片简介" />
        <ProFormDigit
          name="picWidth"
          label="图片宽度"
          placeholder="请输入图片宽度"
          min={1} // 设置最小值
        />
        <ProFormDigit
          name="picHeight"
          label="图片高度"
          placeholder="请输入图片高度"
          min={1} // 设置最小值
        />
        <ProFormSelect
          name="picFormat"
          label="图片格式"
          options={[
            { label: 'PNG', value: 'png' },
            { label: 'JPG', value: 'jpg' },
            { label: 'GIF', value: 'gif' },
          ]}
          placeholder="请选择图片格式"
        />
        <Button type={'primary'} onClick={doSearch}>
          搜索
        </Button>
      </Flex>
    </ProForm>
  );
};
export default PictureSearchForm;
